<template>
  <div class="body">
    <nut-navbar @on-click-back="$router.back()" :rightShow="false">酒店介绍</nut-navbar>
    <div class="hotel-content">
        
          <nut-col :span="19" class="hotel-top">
              <nut-col :span="6">酒店星级：</nut-col>
              <nut-col :span="18">{{hotel.hotel.star_level}}</nut-col>
              <nut-col :span="6">酒店地址：</nut-col>
              <nut-col :span="18">{{hotel.hotel.address}}</nut-col>
          </nut-col>
          <nut-col :span="5" class="nav-button">
              <div class="nav" @click="gototx()">
                  <i class="iconfont"></i><span>导航</span>
              </div>
          </nut-col>
      
    </div>

    <div class="hotel-survey bg-b">
        <div class="title">酒店概况</div>
        <div class="content">
            <nut-col :span="12" v-for="(vo,i) in hotel.roomList" :key="i">{{vo.room_name}}：{{vo.room_num}}间</nut-col>
           
        </div>
    </div>

    <div class="hotel-survey bg-b">
        <div class="title">可提供服务</div>
        <div class="content">
            <div class="list" v-for="(vo,i) in hotel.hotelbasic" :key="i" v-show="vo.type == 2 && vo.checked == 1"><img :src="$fileurl + vo.ico" alt=""><span>{{vo.name}}</span></div>

        </div>
    </div>


    <div class="hotel-survey bg-b">
        <div class="title">酒店介绍</div>
        <div v-html="hotel.hotel.hotel_introduce" class="introduce" :class="{morec:more==true}">
            
        </div>

        <div class="more" v-if="more==false" @click="getmore">点击查看更多></div>

        <div class="more" v-if="more==true" @click="getmore">点击收起></div>
    </div>

    <div class="hotel-survey bg-b">
        <div class="title">所属商圈</div>
        <div class="street">
            <div class="streetl" v-for="(vo,i) in hotel.allnearby" :key="i" v-show="vo.type == 2">
              <nut-col :span="12">{{vo.name}}</nut-col>
              <nut-col :span="12">{{vo.distance}}km</nut-col>
            </div>

            
        </div>
    </div>

    <div class="hotel-survey bg-b">
        <div class="title">交通</div>
        <div class="street">
            <div class="streetl" v-for="(vo,i) in hotel.allnearby" :key="i" v-show="vo.type == 1">
              <nut-col :span="12">{{vo.name}}</nut-col>
              <nut-col :span="12">{{vo.distance}}km</nut-col>
            </div>
        </div>
    </div>

    <div class="introduce_swiper">
        <div class="title">会场平面图</div>
        <div class="introduce_img">
            <nut-swiper
                direction="horizontal"
                ref="demo1"
                :loop="true"
                :canDragging="false"
                :paginationVisible="true"
                >
                <div class="nut-swiper-slide" v-for="(vo,index) in banner" :key="index">
                    <img v-bind:src="$fileurl + vo">
                </div>
                
            </nut-swiper>
        </div>
    </div>
    <!-- 会场平面 -->

    <nut-picker 
        :is-visible="isVisible1" 
        :list-data="listData1"
        @close="switchPicker()"
        @confirm="setYearValue"
    >
    </nut-picker>

  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import moment from 'moment'
  import { getListApi, getDetailsByIdApi } from '../../api/schedule'
  import { IconUrl } from '../../utils/auxiliary'

  export default {
    data () {
      return {
          more:false,
          hotel:[],
          banner:[],
          isVisible1:false,
          listData1:[
             ['腾讯地图', '高德地图', '百度地图']
          ]
      }
    },
    
    async mounted () {
        this.getHotelshow()
        this.getwechat()
    },
    
    methods: {
        getmore(){
            this.more = !this.more
        },//获取更多简介
        getHotelshow(){
            this.$http.get(this.$url + '/inf/common/hotelShow',{
                
            })
            .then(response => {
                this.hotel = response.data
                var i
                for(i=0;i<response.data.hotelbasic.length;i++){
                    let reg=new RegExp('file','g')
                    let newMsg=response.data.hotelbasic[i].ico.replace(reg,'fileImg');
                    response.data.hotelbasic[i].ico = newMsg;   
                }//修改图片地址
                response.data.hotelbasic.forEach(element => {
                    if(element.type == 1){
                        this.banner.push(element.ico)
                    }
                });//添加banner图

            })
        },

        gototx(){
            this.isVisible1 = true
            // window.location.href = 'https://apis.map.qq.com/uri/v1/search?keyword=酒店&region=北京&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77'
        },
        switchPicker(){
            this.isVisible1 = false
        },
        setYearValue(chooseData) {
            var arr=this.hotel.hotel.coordinates.split(",");
            console.log(arr)
            console.log(chooseData[0])
            if(chooseData[0] == "腾讯地图"){
                window.location.href = 'https://apis.map.qq.com/uri/v1/marker?marker=coord:'+ this.hotel.hotel.coordinates +';title:'+ this.hotel.hotel.hotel_name +';referer=myapp;keyword:'+ this.hotel.hotel.hotel_name +''
            }else if(chooseData[0] == "高德地图"){
                window.location.href = 'https://uri.amap.com/marker?position='+ arr[1] + ',' + arr[0] +''
            }else if(chooseData[0] == "百度地图"){
                window.location.href = 'http://api.map.baidu.com/place/search?query='+ this.hotel.hotel.hotel_name +'&location='+ arr[0] + ',' + arr[1] +'&radius=1000&region=广州&output=html&src=webapp.baidu.openAPIdemo'
            }
        },
        getwechat(){
          wx.ready(function() {
            wx.updateAppMessageShareData({
              title: '在线报名—', // 分享标题
              desc: "ceshi",
              link: 'http://' + _this.host, // 分享链接,将当前登录用户转为puid,以便于发展下线
              // imgUrl: imgUrl // 分享图标
            })
            wx.updateTimelineShareData({
              title: '在线报名—', // 分享标题
              desc: "ceshi",
              link: 'http://' + _this.host, // 分享链接,将当前登录用户转为puid,以便于发展下线
              // imgUrl: imgUrl // 分享图标
            })
          })
        }
    }
  }
</script>

<style lang="scss">
  body{
    background: #F9F9F9;
  }
  .bg-b{
    background: #fff;
  }
  .hotel-top{
    div{
      margin-bottom:10px;
    }
  }
  .hotel-content{
      float: left;
      width: 100%;
      background: #fff;
      padding:15px 0 0 20px; 
      box-sizing: border-box;
  }
  .nav-button{
    position: relative;
    .nav{
      width: 70px;
      position:absolute;
      background: #B29462;
      color:#fff;
      height: 30px;
      line-height: 30px;
      text-align: center;
      right:0px;
      border-radius: 3px 0 0 3px;
    }
    
  }

  .hotel-survey{
    float: left;
    width: 100%;
    margin-top:10px;
    padding:15px 15px 5px 20px; 
    box-sizing: border-box;
    .title{
      font-size: 14px;
      margin-bottom:10px;
    }
    .content{
      overflow: hidden;
      margin-top:5px;
      div{
        margin-bottom:10px;
      }
      .list{
          float: left;
          width: 20%;
          text-align: center;
          img{
            width: 25px;
            height: 20px;
            margin:5px auto;
          }
          span{
            float: left;
            width: 100%;
          }
      }
    }
    .introduce{
        color:#666;
        height: 40px;
        overflow: hidden;
        margin-bottom:10px;
        .img{
          width: 100%;
        }
    }
    .more{
      display: block;
      margin:0px 0 5px 0;
      color:#C0C0C0;
      width: 100%;
      float: left;
      text-align: center;
    }
    .morec{
      height: auto;
    }
    .street{
      .streetl{
        float: left;
        width: 100%;
        overflow: hidden;
        margin-bottom:10px;
      }
      .streetl div:nth-child(even){
        text-align: right;
      }
    }
  }

  .introduce_swiper{
      padding:15px;
      background: #fff;
      overflow: hidden;
      margin-top:10px;
      float: left;
      width: 100%;
      box-sizing: border-box;
       .title{
          display: flex;
          margin-bottom:1rem;
          font-size: 14px;
      }
      .introduce_img{
          width: 100%;
          border-radius: 5px;
          img{
              width: 100%;
              border-radius: 5px;
          }
      }
  }

  .nut-picker-control .nut-picker-cancel-btn, .nut-picker-control .nut-picker-confirm-btn{
    color:#B29462;
  }
</style>
